


// import './index.scss'
import * as echarts from 'echarts';
import { useEffect } from 'react'
 

//两条折线echarts


//1 基本的样式
interface propsObj {
    id: any,
    height?:any
    width: number,
    title?: string,
   
    lineDatasObj?: any  // 初始值  =》{}
}
function LineTwOEcharts(props: propsObj) {


    useEffect(() => {
        //  => 写一个方法 =》 对echart 进行创建
       
        // console.log('echarts组件创建 和 echarts 监听到 后端给的数据', props.lineDatasObj.tone,8888899999999);
        if( props.lineDatasObj.tone){
            createEcharts()
        }
    }, [props.lineDatasObj])

    
    //自己定义方法 =》判断这个 折线数据是什么值=》 没有x轴 数据

    
    const createEcharts = () => {
      
          let  dom:any = document.getElementById(props.id)
           let myChart = echarts.init(dom);
        
        
      
        

        //  配置项目  =》 echarts 配置属性 =》做好注释
        let option = {
            xAxis: { //x
                type: 'category',
                data: props.lineDatasObj.tone.datax,
            
            },
            yAxis: {  //y
                type: 'value',
                
            },
            series: [  //数据数据 props.from?[]:props.barDatasObj,
           
                {
                    data: props.lineDatasObj.tone.datay,
                    type: 'line'
                },
                {
                    data: props.lineDatasObj.tTwo.datay,
                    type: 'line'
                },
               
            ]
        };

        myChart.setOption(option)
    }
    return (  // props.width
        <div className="lineEcharts" style={{ width: props.width + "%" }}>

            {/* 名称  // props.height?props.height:300 */}
             
            <h4>{props.title}</h4>
            <div id={props.id} style={{ height:props.height?props.height:300 + 'px', width:100+ "%" }}></div>
        </div>
    )
}





// 二次封装 echarts  => 自己做完练习 =》能力=》 看到ui图 =》可以分析封装echarts 组件


export default LineTwOEcharts